<template>
	<div class="decorate-preSell"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <section class="presell_goodspic">
      <ul>
        <li class="point-goods-li" v-for="(goods,index) in tplItemData.goodslist" :key="index">
          <a class="goodsimg" href="javascript:;" @click="openLink(goods.link)">
            <img
              :src="goods.is_compress == 1 ?`${goods.pic}480x480`:goods.pic"
              alt
            />
            <section class="goods-info">
              <h3 class="title">
                <span class="presell">预售</span>
                <span class="fontZiy" v-if="goods.is_self_support == 1">自营</span>
                {{goods.title}}
              </h3>
              <h4 class="goods-sub-title" v-if="goods.fenxiao_slogan">{{goods.fenxiao_slogan}}</h4>
              <div class="time-info">
                <div class="time-info-item">
                  <div class="fl end_icon">结束时间:{{goods.end_time}}</div>
                  <div class="fr">仅剩<span>{{goods.num}}</span>件</div>
                </div>      
                <div class="time-info-item">
                  <div class="fl send_icon">发货时间:{{goods.end_delivery_time}}</div>
                  <div class="fr">累计销量<span>{{goods.count_sales_volume}}</span>件</div>
                </div>
              </div>
              <div class="price">
                <span class="new_price" v-html="scaleGoodsPriceFn(goods.price)"></span>
                <span class="original_price"><s>&yen;{{goods.original_price}}</s></span>
                <div class="goods-btn">{{tplItemData.goodstxt}}</div>
              </div>
            </section>
          </a> 
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
  /**
   * @Author: yqe@360shop.cn
   * @Date: 2020年07月08日15:11:21
   * @Last Modified by: yqe@360shop.cn
   * @Last Modified time: 2020年07月08日15:11:21
   */
  import { openPage } from '@/utils/utils'
  import { scaleGoodsPrice } from '@/utils/index'
  import Vue from 'vue'

  export default Vue.extend({
    name: 'index',
    components: {
    },
    props: {
      tplItemData: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    methods: {
      openLink(link){
        openPage(link)
      },
      /**
       * 商品价格 整数放大
       */
      scaleGoodsPriceFn(price, className) {
        return scaleGoodsPrice(price, className)
      }
    },
    created() {
      // // console.log(this.tplItemData)
    }
  })
</script>

<style lang="scss">
@import "src/styles/mixin";
.presell_goodspic{
  li{
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 20px;
    background: #fff;
    margin-top: 20px;
    &:first-child{
      margin-top: 0;
    }
    .goodsimg{
      display: block;
      img{
          display: block;
          width: 100%;
      }
    }
    .goods-info{
      overflow: hidden;
      position: relative;
      .title{
        .presell {
          display: inline-block;
          color: #fff;
          background: #F11228;
          padding: 0 8px;
          margin-right: 6px;
          font-size: 24px;
          border-radius: 4px;
          line-height: 32px;
          color: #fff;
        }
        font-weight: bold;
        @include lineClamp(28px,28px,2);
        overflow: hidden;
        margin-top: 15px;
      }
      .goods-sub-title{
        @include lineClamp(24px,1.5,1);
        height: auto;
        color: #999999;
        overflow: hidden;
        margin-top: 15px;
      }
      .time-info{
        padding: 20px 0;
        .time-info-item{
          overflow: hidden;
          color: #666;
          line-height: 50px;
          div{
            &:last-child{
              color: #9999;
              span{
                margin: 0 3px;
                color: #F11227;
              }
            }
            &:first-child{
              padding-left: 40px;
              background-size:30px 30px;
              background-repeat: no-repeat;
              background-position:left;
              &.end_icon{
                background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/goods/presell_1.png);
              }
              &.send_icon{
                background-image: url(https://img.wifenxiao.com/h5-wfx/images/diy/goods/presell_2.png);
              }
            }
          }
          
        }
      }
      .price{
        line-height: 64px;
        position: relative;
        .new_price{
          font-size: 32px;
          color: #e31d1a;
        }
        .original_price{
          font-size: 22px;
          color: #999;
          margin-left: 12px;
          s{
            display:inline;
          }
        }
        .goods-btn{
          padding: 0 32px;
          line-height: 52px;
          color: #fff;
          position: absolute;
          top: 7px;
          right: 0;
          @include gradient(right,#FD1B49,#E90103);
          border-radius:26px;
        }
      } 
    }
  }
}
</style>
